<template>
	<view class="content">
		<view class="rech-hd">
			<view class="rech-hd-tit">可提现佣金</view>
			<view class="rech-hd-con">
				<text>188</text>
			</view>
			<view class="acc-btn">
				<navigator url="../my/withdraw">提现</navigator>
			</view>
		</view>
		<view class="acc-pri">
			<view class="acc-pri-con">
				<view class="acc-pri-num">
					<text>30</text>
				</view>
				<view class="acc-pri-tit">今日收益</view>
			</view>
			<view class="acc-pri-con">
				<view class="acc-pri-num">
					<text>300</text>
				</view>
				<view class="acc-pri-tit">总收益</view>
			</view>
			<view class="acc-pri-con">
				<view class="acc-pri-num">
					<text>30</text>
				</view>
				<view class="acc-pri-tit">待入账</view>
			</view>
		</view>
	
		<view class="place-time">
			<view class="my-app">
				<view class="my-app-li" @tap="goShare()">
					<view class="my-app-icon">
						<text class="iconfont icon-erweima"></text>
					</view>
					<view class="my-app-tit">邀请好友</view>
				</view>
				<view class="my-app-li" @tap="goTeam()">
					<view class="my-app-icon">
						<text class="iconfont icon-yaoqinghaoyou"></text>
						<text class="my-num">18</text>
					</view>
					<view class="my-app-tit">我的团队</view>
				</view>
				<view class="my-app-li" @tap="goOrder()">
					<view class="my-app-icon">
						<text class="iconfont icon-dingdan"></text>
						<text class="my-num">188</text>
					</view>
					<view class="my-app-tit">团队订单</view>
				</view>
			</view>
		</view>	
	</view>
</template>
<script>
export default {
    data() {
        return {
        }
    },
    methods: {
		// 邀请好友
		goShare(){
	        uni.navigateTo({
	            url: '/pages/distribution/share'
	        })
	    },
		// 我的团队
		goTeam(){
	        uni.navigateTo({
	            url: '/pages/distribution/team'
	        })
	    },
		// 团队订单
		goOrder(){
	        uni.navigateTo({
	            url: '/pages/distribution/order'
	        })
	    }
    }
}
</script>
<style lang="scss">
page{
	background-color: $uni-bg-color-grey;
}
.content{
	.place-time{
		margin:30rpx;
		padding:30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.place-time-tp{
			display: flex;
			border-bottom:1px solid #eee;
			padding-bottom:10rpx;
			margin-bottom:10rpx;
			.place-time-name{
				flex: 1;
				font-size:30rpx;
				font-weight: bold;
			}
			.place-time-con{
				flex: 2;
				text-align: right;
				vertical-align: middle;
				text{
					&:first-child{
						font-size:28rpx;
						color: $uni-text-color-grey;
					}
					&.place-coupon{
						color: #ff0000;
					}
				}
			}
		}
		.my-order{
			display: flex;
			.my-ord-li{
				flex: 1;
				text-align: center;
				margin-top:15rpx;
				.my-ord-icon{
					margin:10rpx 0;
					text{
						color: $uni-text-color-active;
						font-size:50rpx;
					}
				}
				.my-ord-tit{
					font-size:28rpx;
				}
			}
		}
		.my-app{
			.my-app-li{
				width:33%;
				display: inline-block;
				text-align: center;
				margin-top:15rpx;
				.my-app-icon{
					margin:10rpx 0;
					position: relative;
					.iconfont{
						display: inline-block;
						width:100rpx;
						height: 100rpx;
						line-height: 100rpx;
						border-radius: 50%;
						color:#fff;
						font-size:50rpx;
						background-color: $uni-text-color-active;
					}
					.my-num{
						position: absolute;
						top:-10rpx;
						left:60%;
						color: #fff;
						background-color: #f00;
						font-size: 20rpx;
						padding: 2rpx 8rpx;
						border-radius: 20rpx;
						border:2rpx solid #fff;
					}
				}
				&:nth-child(2){
					.my-app-icon{
						.iconfont{
							background-color:#ff8618;
						}
					}
				}
				&:nth-child(3){
					.my-app-icon{
						.iconfont{
							background-color:#6057d4;
						}
					}
				}
				.my-app-tit{
					font-size:28rpx;
				}
			}
		}
	}
	.acc-pri{
		display: flex;
		background-color: #fff;
		padding:30rpx 0;
		.acc-pri-con{
			flex: 1;
			text-align: center;
			&:first-child{
				border-right: 2rpx solid  $uni-bg-color-grey;
			}
			.acc-pri-num{
				text{
					position: relative;
					font-size: 40rpx;
					&::before{
						position: absolute;
						left:-25rpx;
						bottom:5rpx;
						content: "￥";
						font-size: 24rpx;
					}
				}
			}
			.acc-pri-tit{
				margin-top:10rpx;
				font-size: 28rpx;
				color: $uni-text-color-grey;
			}
		}
	}
	.rech-hd{
		padding: 50rpx 0 50rpx;
		color: #fff;
		text-align: center;
		background-color:$uni-text-color-active;
		.acc-btn{
			margin-top: 30rpx;
			navigator{
				display: inline-block;
				padding:10rpx 50rpx;
				border-radius:30rpx;
				font-size: 24rpx;
				background-color:#fff;
				color:$uni-text-color-active;
			}
		}
		.rech-hd-tit{
			font-size: 28rpx;
			margin-bottom: 20rpx;
		}
		.rech-hd-con{
			text{
				font-size:70rpx;
				&::before{
					content: "￥";
					font-size:32rpx;
				}
			}
		}
	}
	.tech-eva-con{
		margin:30rpx 20rpx;
		border-radius:20rpx;
		padding:20rpx 30rpx;
		background-color: #fff;
		.record-con{
			.record-li{
				padding:20rpx 0;
				border-bottom: 2rpx solid  $uni-bg-color-grey;
				&:last-child{
					border-bottom: none;
				}
				.record-li-tp{
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					margin-bottom: 5rpx;
				}
				.record-li-bt{
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					color: $uni-text-color-grey;
					.record-tp-rt{
						text{
							color: #f00;
						}
					}
				}
			}
		}
		.place-rem-tit{
			font-size: 28rpx;
			margin: 20rpx 0;
			text{
				&:first-child{
					font-weight: bold;
				}
				&:last-child{
					font-size: 24rpx;
					color: $uni-text-color-grey;
				}
			}
		}
	}
}
</style>